İlerici Web Uygulaması Paylaşım Hedefi İşleyicisi: Özel Paylaşım Verilerini İşleme

Web Paylaşım Hedefi API'si, İlerici Web Uygulamalarını (PWA'lar) kullanıcıların cihazlarının yerel paylaşım yetenekleriyle sorunsuz bir şekilde entegre etmelerini sağlar. Bu, PWA'nızın metin, resim veya URL gibi diğer uygulamalardan paylaşılan verileri almasına ve bunları özel bir şekilde işlemesine olanak tanır. Bu kılavuz, PWA'larınızda paylaşım hedefi işleyicileri oluşturma ve kullanma konusuna derinlemesine dalmakta ve gelişmiş kullanıcı deneyimleri için özel paylaşım verisi işlemeye odaklanmaktadır.

Web Paylaşım Hedefi API'sini ve PWA'ları Anlama

İlerici Web Uygulamaları, yerel uygulama benzeri deneyimler sunmak için modern web teknolojilerinden yararlanır. Güvenilir, hızlı ve ilgi çekicidirler, kullanıcıların ana ekranlarından doğrudan erişmelerine olanak tanırlar. Web Paylaşım Hedefi API'si bu işlevselliği genişleterek, PWA'ların diğer uygulamalardan paylaşılan içerikler için hedef olarak hareket etmelerini sağlayarak onları daha da çok yönlü hale getirir.

Temel Kavramlar

• Web Uygulama Manifestosu: Paylaşım hedefi yapılandırması da dahil olmak üzere uygulamanızla ilgili meta verileri tanımlayan bir PWA'nın kalbi.
• Paylaşım Hedefi İşleyicisi: PWA'nıza paylaşılan verileri yakalayan ve işleyen JavaScript kodu.
• Paylaşım Verisi: Paylaşım uygulamasından alınan metin, resim veya URL gibi bilgiler.
• Kapsam: PWA'nın hangi URL'ler için paylaşılan verileri işleyebileceğini tanımlar.

Web Uygulama Manifestosunda Paylaşım Hedefinizi Ayarlama

İlk adım, paylaşım hedefinizi web app manifest içinde yapılandırmaktır. Bu JSON dosyası, tarayıcıya PWA'nız hakkında bilgi verir ve paylaşım isteklerini nasıl işlemesi gerektiğini belirtir. Manifestonuzdaki share_target üyesi kritik öneme sahiptir.

            {
  "name": "My Awesome App",
  "short_name": "AwesomeApp",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/images/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/images/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "share_target": {
    "action": "/share-target-handler",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "title",
      "text": "text",
      "url": "url",
      "files": [
        {
          "name": "image",
          "accept": ["image/*"]
        }
      ]
    }
  }
}

            

              
                Copy
              
            
          

Açıklama:

• action: PWA'nızda paylaşılan verileri işleyecek olan uç noktanın URL'si (ör. /share-target-handler).
• method: Paylaşım isteği için kullanılan HTTP yöntemi (genellikle POST).
• enctype: Form verilerinin nasıl kodlandığını belirtir (dosya yüklemeleri için multipart/form-data yaygındır).
• params: Beklenen veri parametrelerini açıklar. Paylaşım uygulamasından ne tür veriler almayı beklediğinizi burada beyan edersiniz.
• title: Paylaşılan içeriğin başlığı.
• text: Paylaşımın metin içeriği.
• url: Paylaşımla ilişkili bir URL.
• files: Paylaşılan resimleri veya diğer dosyaları işlemek için kullanılan bir dizi dosya belirtimi. name, işleyicinizde dosyayı nasıl tanımladığınızdır. accept, izin verilen dosya türlerini belirtir (örneğin, herhangi bir resim için image/*).

Paylaşım Hedefi İşleyicisini Oluşturma (JavaScript)

Manifestonuzu yapılandırdıktan sonra, paylaşılan verileri işleyen JavaScript kodunu oluşturacaksınız. Bu genellikle action URL'nize gönderilen POST isteğini işlemeyi içerir. Bu, Node.js gibi bir çerçeve ile sunucu tarafında veya çok küçük, basit bir işleyici oluşturuyorsanız istemci tarafında bir service worker içinde yapılabilir.

Temel Metin ve URL İşleme Örneği

İşte metin ve URL'leri yakalayan sunucu taraflı bir yaklaşım (Node.js ile Express) kullanan temel bir örnek:

            
// server.js (Node.js with Express)
const express = require('express');
const multer = require('multer'); // For handling multipart/form-data
const path = require('path');
const fs = require('fs');

const app = express();
const upload = multer({ dest: 'uploads/' }); // Configure multer for file uploads
const port = 3000;

app.use(express.static('public')); // Serve static assets

// Parse URL-encoded bodies
app.use(express.urlencoded({ extended: true }));


app.post('/share-target-handler', upload.any(), (req, res) => {
    // Access shared data from req.body
    const title = req.body.title;
    const text = req.body.text;
    const url = req.body.url;

    console.log('Shared Title:', title);
    console.log('Shared Text:', text);
    console.log('Shared URL:', url);

    // Process the shared data as needed (e.g., save to a database, display on a page)
    res.send(`
        
Share Received!
        
Title: ${title || 'None'}
        
Text: ${text || 'None'}
        
URL: ${url || 'None'}
    `);
});

app.listen(port, () => {
    console.log(`Server listening on port ${port}`);
});

            

              
                Copy
              
            
          

Açıklama:

• `multipart/form-data` için `multer` kütüphanesini kullanan basit bir uygulama oluşturmak amacıyla Express ile bir Node.js sunucusu kullanıyoruz.
• `/share-target-handler` rotası `POST` isteklerini işler.
• İşleyici, istek gövdesinden `title`, `text` ve `url` parametrelerini çıkarır.
• Kod daha sonra verileri konsola kaydeder ve temel bir HTML sayfasında görüntüler.

Görüntü İşleme Örneği

İşleyicimizi görüntü dosyalarını işleyecek şekilde geliştirelim. Sunucu kodunu aşağıdaki gibi değiştirin:

            
// server.js (Node.js with Express, extended)
const express = require('express');
const multer = require('multer');
const path = require('path');
const fs = require('fs');

const app = express();
const upload = multer({ dest: 'uploads/' }); // Configure multer for file uploads
const port = 3000;

app.use(express.static('public')); // Serve static assets, including the uploads directory.

// Parse URL-encoded bodies
app.use(express.urlencoded({ extended: true }));

app.post('/share-target-handler', upload.any(), (req, res) => {
    const title = req.body.title;
    const text = req.body.text;
    const url = req.body.url;
    const files = req.files; // Access the uploaded files

    console.log('Shared Title:', title);
    console.log('Shared Text:', text);
    console.log('Shared URL:', url);
    console.log('Shared Files:', files);

    let imageHtml = '';
    if (files && files.length > 0) {
        files.forEach(file => {
            const imagePath = path.join('/uploads', file.filename);
            imageHtml += ``;
        });
    }

    res.send(`
        
Share Received!
        
Title: ${title || 'None'}
        
Text: ${text || 'None'}
        
URL: ${url || 'None'}
        ${imageHtml}
    `);
});

app.listen(port, () => {
    console.log(`Server listening on port ${port}`);
});

            

              
                Copy
              
            
          

Önemli Değişiklikler:

• Şimdi, çok parçalı form verilerini (dosyalar dahil) ayrıştırmaktan sorumlu olan `multer` paketini içe aktarıyoruz.
• `multer` yapılandırması, yüklenen dosyaları bir `uploads` dizinine kaydeder (bu dizinin projenizde mevcut olduğundan emin olun). `dest: 'uploads/'` yol argümanı, dosyaların kaydedileceği yerel konumu tanımlar.
• `multer` tarafından doldurulan `req.files` özelliği, dosyalar paylaşılmışsa bir dizi dosya nesnesi içerecektir.
• Görüntü işleme bölümü, yüklenen dosyalar arasında döngü yapar ve her görüntü için bir `img` etiketi oluşturur. `path.join()` işlevi, yüklenen görüntülere giden doğru yolu oluşturur.
• En önemlisi, yükleme dizinimizden statik varlıkları sunmak için `app.use(express.static('public'));` kullanıyoruz. Bu, yüklemelerin herkese açık olmasını sağlayacaktır.

Bunu test etmek için, başka bir uygulamadan (örneğin, cihazınızın fotoğraf galerisi) PWA'nıza bir resim paylaşırsınız. Paylaşılan resim daha sonra yanıt sayfasında görüntülenecektir.

Service Worker Entegrasyonu (İstemci Taraflı İşleme)

Daha gelişmiş senaryolar veya çevrimdışı yetenekler için, paylaşım hedefi işleme bir service worker'da uygulanabilir. Bu yaklaşım, PWA'nın aktif bir ağ bağlantısı olmadan bile çalışmasına olanak tanır ve veri işleme mantığı üzerinde daha fazla kontrol sağlayabilir. Bu örnek, zaten kayıtlı bir service worker'ınız olduğunu varsayar.

            
// service-worker.js
self.addEventListener('fetch', (event) => {
  // Check if the request is for our share target handler
  if (event.request.url.includes('/share-target-handler') && event.request.method === 'POST') {
    event.respondWith(async function() {
      try {
        const formData = await event.request.formData();
        const title = formData.get('title');
        const text = formData.get('text');
        const url = formData.get('url');
        const imageFile = formData.get('image'); // Access the uploaded image file

        console.log('Shared Title (SW):', title);
        console.log('Shared Text (SW):', text);
        console.log('Shared URL (SW):', url);
        console.log('Shared Image (SW):', imageFile); // Handle image file as needed

        // Process the shared data (e.g., store in IndexedDB)
        // Example: Store in IndexedDB
        if (title || text || url || imageFile) {
          await storeShareData(title, text, url, imageFile);  // Assume this is defined.
        }

        return new Response('Share received and processed!', { status: 200 });
      } catch (error) {
        console.error('Error handling share:', error);
        return new Response('Error processing share.', { status: 500 });
      }
    }());
  }

  // Other fetch event handling (e.g., caching, network requests)
  // ...
});

async function storeShareData(title, text, url, imageFile) {
    const dbName = 'shareDataDB';
    const storeName = 'shareStore';
    const db = await new Promise((resolve, reject) => {
        const request = indexedDB.open(dbName, 1);

        request.onerror = (event) => {
            reject(event.target.error);
        };

        request.onsuccess = (event) => {
            resolve(event.target.result);
        };

        request.onupgradeneeded = (event) => {
            const db = event.target.result;
            if (!db.objectStoreNames.contains(storeName)) {
                db.createObjectStore(storeName, { autoIncrement: true });
            }
        };
    });

    const transaction = db.transaction(storeName, 'readwrite');
    const store = transaction.objectStore(storeName);

    const data = {
        title: title,
        text: text,
        url: url,
        timestamp: Date.now()
    };

    if (imageFile) {
        const reader = new FileReader();
        reader.onload = (event) => {
           data.image = event.target.result;
           store.add(data);
        };

        reader.onerror = (event) => {
            console.error("Error reading image file:", event.target.error);
        };
        reader.readAsDataURL(imageFile);
    } else {
        store.add(data);
    }

    await new Promise((resolve, reject) => {
        transaction.oncomplete = resolve;
        transaction.onerror = reject;
    });
}

            

              
                Copy
              
            
          

Açıklama:

• Service worker, fetch olaylarını yakalar.
• İsteğin, paylaşım hedefi işleyici URL'nize (/share-target-handler) bir POST olup olmadığını kontrol eder.
• Service worker, paylaşılan verileri ayrıştırmak için event.request.formData() kullanır.
• Veri alanlarını (başlık, metin, url ve resim) çıkarır. Dosya bir Blob olarak işlenir.
• Paylaşılan veriler daha sonra service worker'ın kendisi içinde işlenir. Bu örnekte, veriler bir IndexedDB'de saklanır.
• Kod, paylaşım verilerini IndexedDB'de saklamak için bir storeShareData() işlevi (kod tabanınızın başka bir yerinde bulunabilir) sağlar.

Service Worker'lar ile İlgili Önemli Hususlar:

• Asenkron İşlemler: Service worker'lar asenkron olarak çalışır, bu nedenle herhangi bir işlem (IndexedDB erişimi gibi) async/await veya promise'ler ile ele alınmalıdır.
• Kapsam: Service worker'ların bir kapsamı vardır ve erişilen tüm kaynaklar bu kapsam içinde olmalı (veya kaynak harici ise CORS aracılığıyla erişilebilir olmalı).
• Çevrimdışı İşlevsellik: Service worker'lar PWA'ların çevrimdışı çalışmasını sağlar. Paylaşım hedefleri, cihazın ağ bağlantısı olmasa bile kullanılabilir.

Kullanıcı Deneyimini Özelleştirme

Paylaşılan verilerin nasıl işlendiğini özelleştirme yeteneği, daha zengin bir kullanıcı deneyiminin kapılarını aralar. İşte dikkate alınması gereken bazı fikirler:

• İçerik Toplama: Kullanıcıların PWA'nız içinde çeşitli kaynaklardan bağlantılar veya metin parçaları toplamasına izin verin. Örneğin, bir haber toplayıcı, kullanıcıların makaleleri doğrudan okuma listelerine paylaşmalarını sağlayabilir.
• Görüntü Düzenleme ve Geliştirme: Bir görüntü uygulamanıza paylaşıldıktan sonra temel görüntü düzenleme özellikleri sağlayın, böylece kullanıcılar görüntüleri kaydetmeden veya daha fazla paylaşmadan önce değiştirebilirler. Bu, kullanıcıların görüntülere not eklemesine veya filigran eklemesine olanak tanıyan görüntü tabanlı uygulamalar için yararlı olabilir.
• Sosyal Medya Entegrasyonu: Kullanıcıların PWA'nız içinde sosyal medya gönderilerini paylaşılan içerikle önceden doldurmasını sağlayın. Bu, makale paylaşımı veya sosyal medya platformlarına resim paylaşımı için kullanılabilir.
• Çevrimdışı Kaydetme: Paylaşılan verileri yerel olarak saklayın (örneğin, IndexedDB kullanarak), böylece kullanıcılar internet bağlantısı olmasa bile erişebilirler. Bu, sınırlı bağlantıya sahip bölgelerdeki kullanıcılar için paha biçilmezdir.
• Bağlamsal Eylemler: Paylaşılan verinin türüne bağlı olarak, kullanıcıya belirli eylemler veya öneriler sunun. Örneğin, bir URL paylaşılırsa, PWA bunu bir okuma listesine eklemeyi veya ilgili içeriği önermeyi teklif edebilir.

Farklı Paylaşım Türlerini İşleme

Manifestodaki params, çeşitli dosya biçimleri için farklı accept türleri belirtmenize olanak tanır. İşte bazı örnekler:

• Resimler: "accept": ["image/*"] tüm resim türlerini kabul edecektir.
• Belirli Resim Türleri: "accept": ["image/png", "image/jpeg"] yalnızca PNG ve JPEG resimlerini kabul edecektir.
• Video: "accept": ["video/*"] tüm video türlerini kabul edecektir.
• Ses: "accept": ["audio/*"] tüm ses türlerini kabul edecektir.
• PDF: "accept": ["application/pdf"] PDF belgelerini kabul edecektir.
• Çoklu Türler: "accept": ["image/*", "video/*"] hem resimleri hem de videoları kabul edecektir.

Paylaşım hedefi işleyiciniz, belirttiğiniz tüm türleri işleyecek şekilde yazılmalıdır. İşleyiciniz tüm paylaşım türlerini işlemezse, paylaşım uygulaması doğru çalışmayabilir. Her dosya türüyle buna göre başa çıkmak için mantık eklemeniz gerekecektir. Örneğin, yüklenen dosya türüne göre farklı kütüphaneler kullanabilirsiniz.

İleri Teknikler ve Dikkat Edilmesi Gerekenler

Hata Yönetimi

Her zaman sağlam bir hata yönetimi uygulayın. Paylaşım hedefi işlemleri ağ sorunları, yanlış veriler veya beklenmedik dosya formatları nedeniyle başarısız olabilir. Kullanıcıya bilgilendirici hata mesajları sağlayın ve hataları zarif bir şekilde yönetin. Olası hataları yönetmek için service worker ve sunucu taraflı kodunuzda `try...catch` blokları kullanın. Hata ayıklama amacıyla hataları konsola kaydedin.

Güvenlik Hususları

• Veri Doğrulama: Paylaşım isteklerinden aldığınız verileri her zaman doğrulayın. Siteler arası komut dosyası çalıştırma (XSS) saldırıları gibi güvenlik açıklarını önlemek için girdiyi temizleyin ve filtreleyin.
• Dosya Boyutu Sınırları: Kötüye kullanımı ve kaynak tükenmesini önlemek için dosya boyutu sınırları uygulayın. Sunucu taraflı kodunuzda ve/veya service worker'ınızda dosya boyutu sınırlarını yapılandırın.
• Erişim Kontrolü: PWA'nız hassas verileri işliyorsa, kimin veri paylaşabileceğini ve nasıl işlendiğini kısıtlamak için uygun erişim kontrol mekanizmalarını uygulayın. Kullanıcı kimlik doğrulaması gerektirmeyi düşünün.

Kullanıcı Gizliliği

Kullanıcı gizliliğine dikkat edin. Yalnızca ihtiyacınız olan verileri isteyin ve paylaşılan bilgileri nasıl kullandığınız konusunda şeffaf olun. Gerektiğinde kullanıcı onayı alın ve ilgili veri gizliliği düzenlemelerine (örneğin, GDPR, CCPA) uyun.

Yerelleştirme ve Uluslararasılaştırma (i18n)

Küresel kitleyi göz önünde bulundurun. PWA'nızın birden çok dili ve bölgesel ayarı desteklediğinden emin olun. Tarihleri, sayıları ve para birimlerini doğru bir şekilde işlemek için JavaScript'teki `Intl` API gibi uluslararasılaştırma tekniklerini kullanın. Hata mesajları ve onay istemleri dahil olmak üzere uygulamanızdaki tüm kullanıcıya yönelik metinleri çevirin.

Test ve Hata Ayıklama

• Cihazlar ve Tarayıcılar Arasında Test Etme: Uyumluluk ve tutarlı davranış sağlamak için paylaşım hedefi işleyicinizi çeşitli cihazlarda ve tarayıcılarda kapsamlı bir şekilde test edin.
• Tarayıcı Geliştirici Araçları: Ağ isteklerini incelemek, JavaScript kodunda hata ayıklamak ve herhangi bir sorunu belirlemek için tarayıcı geliştirici araçlarını kullanın.
• Service Worker Hata Ayıklama: Service worker etkinliğini incelemek, mesajları günlüğe kaydetmek ve sorunları gidermek için tarayıcınızın geliştirici araçlarındaki service worker hata ayıklayıcısını kullanın.
• Manifesto Doğrulama: Doğru biçimlendirildiğinden emin olmak için manifesto dosyanızı doğrulayın. Çevrimiçi olarak birçok manifesto doğrulayıcı mevcuttur.

Dünyadan Örnek Kullanım Senaryoları

• Yaratıcı Profesyoneller için Görüntü Paylaşımı (Japonya): Bir fotoğraf düzenleme PWA'sı, fotoğrafçıların kamera rulolarından görüntüleri doğrudan düzenleyiciye paylaşmalarına olanak tanır, böylece hızlı bir şekilde filtreler uygulayabilir veya başka ayarlamalar yapabilirler.
• Okuyucular için Makale Kaydetme (Hindistan): Bir haber toplayıcı PWA, kullanıcıların web tarayıcılarından makaleleri doğrudan okuma listesine paylaşmalarını sağlayarak çevrimdışı görüntülemelerine olanak tanır.
• Eğitim Ortamlarında Hızlı Not Alma (Almanya): Bir not alma PWA'sı, öğrencilerin dersler sırasında hızlıca not oluşturmak için diğer uygulamalardan metin parçacıkları veya web sitesi bağlantıları paylaşmalarına olanak tanır.
• Belgeler Üzerinde İşbirliği (Brezilya): İşbirlikçi bir belge düzenleme PWA'sı, kullanıcıların hızlı işbirliği için diğer uygulamalardan metin ve resim paylaşmalarını sağlar.

Sonuç

PWA'nızda paylaşım hedefi işleyicileri uygulamak, kullanıcı etkileşimini artırmanın ve kullanıcıların cihazlarının yerel paylaşım yetenekleriyle sorunsuz bir şekilde entegre olmanın güçlü bir yoludur. Sağlanan yönergeleri ve örnekleri takip ederek, küresel olarak geniş bir cihaz ve platform yelpazesinde daha iyi bir kullanıcı deneyimi sunan PWA'lar oluşturabilirsiniz. Bu özellikleri uygularken kullanıcı deneyimini, güvenliği ve gizliliği göz önünde bulundurmayı unutmayın. Kullanıcı geri bildirimlerine dayalı sürekli test ve iyileştirme, başarılı bir uygulama için çok önemlidir.

Web Paylaşım Hedefi API'sinden yararlanarak, kalabalık bir dijital ortamda öne çıkan, gerçekten ilgi çekici ve kullanıcı dostu PWA'lar oluşturabilirsiniz. İyi şanslar ve iyi kodlamalar!